<template>
  <!--下方查看详情表格面板-->
  <el-collapse-transition>
    <div v-if="showTable" class="new-queryResultDiv" :class="showSelectId ? 'min-Table' : 'max-Table'">
      <div class="new-queryTableBtn">
        <el-button @click="closeTableDiv" type="primary">关闭</el-button>
        <span class="new-queryTableSpan">{{ selectType }}</span>
      </div>
      <div class="new-queryTableDiv">
        <!--数据表格-->
        <el-form ref="formTable" :model="tableDataForm" style="height:100%;">
          <el-table v-if="isTable" v-loading="loading" key="table1" ref="multipleTable" :data="tableDataForm.tableData" tooltip-effect="dark"
            height="80%" :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }" stripe>
              <el-table-column v-for="item in tableDataForm.title" :key="item.prop" :prop="item.prop" :width="160" :label="item.label" />
          </el-table>
          <el-table v-if="isTable == false" v-loading="loading" ref="tableRef" height="100%" :data="tableDataForm.tableData" stripe
            row-key="id" class="headborder-table">
            <!-- <el-table-column label="序号" type="index" width="80" align="center">
              <template #default="scope">
                <span>{{ (queryParams.page - 1) * queryParams.rows + scope.$index + 1 }}</span>
              </template>
            </el-table-column> -->
            <el-table-column label="建筑物编号" align="center" prop="buildingCode" />
            <el-table-column label="省" align="center" prop="province" />
            <el-table-column label="市" align="center" prop="city" />
            <el-table-column label="区/县" align="center" prop="county" />
            <el-table-column label="经度" align="center" prop="longitude" />
            <el-table-column label="纬度" align="center" prop="latitude" />
            <el-table-column label="结构类型" align="center" prop="" width="280">
              <el-table-column label="一级" align="center" prop="structureType1" width="140">
                <template #default="scope">
                  {{ getStructureType1(scope.row.structureType1) }}
                </template>
              </el-table-column>
              <el-table-column label="二级" align="center" prop="structureType2">
                <template #default="scope">
                  {{ getStructureType2(scope.row.structureType2) }}
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="设防情况" align="center" prop="defenceLevel">
              <template #default="scope">
                <span v-if="scope.row.defenceLevel == '0'">未设防</span>
                <span v-if="scope.row.defenceLevel == '6'">6级</span>
                <span v-if="scope.row.defenceLevel == '7'">7级</span>
                <span v-if="scope.row.defenceLevel == '8'">8级</span>
                <span v-if="scope.row.defenceLevel == '9'">9级</span>
                <span v-if="scope.row.defenceLevel == '10'">自设防</span>
              </template>
            </el-table-column>
            <el-table-column label="年代" align="center" prop="year">
              <template #default="scope">
                {{ getYearName(scope.row.year) }}
              </template>
            </el-table-column>
            <el-table-column label="层数" align="center" prop="floors" />
            <el-table-column label="创建人" align="center" prop="createName" />
          </el-table>
        </el-form>
      </div>
      <!--分页显示-->
      <div class="new-queryTableDiv-page">
        <el-pagination v-if="totalCount > 0" v-model:current-page="currentPage"
          v-model:page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount"
          @current-change="handleCurrentChange" @size-change="handleSizeChange" />
      </div>
    </div>
  </el-collapse-transition>
</template>

<script setup>
import { queryDataView } from '@/api/disasterManage/kilometerGrid/index.js'
import { getDict } from "@/api/system/dict"
import { reactive, toRefs } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import { debug } from 'util'

const props = defineProps({
  versionCode: {
    type: String,
    default: ''
  },
  typeCode: {
    type: String,
    default: ''
  },
  showTable: {
    type: Boolean,
    default: false
  },
  typeName: {
    type: String,
    default: ''
  },
  paramsData: {
    type: Object,
    default: {}
  }
});

const { proxy } = getCurrentInstance();
const loading = ref(false);
const currentPage = ref(1);//当前页码
const pageSize = ref(10);//每页显示数据数量
const totalCount = ref(0);//总数据数量
const selectType = ref('')
const showSelectId = ref(false)
const isTable = ref(true)
const structureTypeArr1 = ref([])
const structureTypeArr2All = ref([])
const yearArr = ref([])

const data = reactive({
  tableDataForm: {
    tableData: [],//表格数据
    //通用字段
    title: []
  },
  params: {
    page: 1,
    rows: 10
  }
});
const { tableDataForm,params } = toRefs(data);

//查询
watch(() => props.showTable, val => {
  if (val) {
    showSelectId.value = true;
    params.value.versionCode = props.versionCode;
    params.value.typeCode = props.typeCode;
    //查询数据
    queryTableDataByPage();
  }
}, { deep: true, immediate: true });

const emits = defineEmits(['closeTableDiv']);
//关闭
const closeTableDiv = () => {
  emits("closeTableDiv");
}

//分页
const handleSizeChange = (val) => {
  // 改变每页显示的条数
  pageSize.value = val;
  // 注意：在改变每页显示的条数时，要将页码显示到第一页
  currentPage.value = 1;
  queryTableDataByPage();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  queryTableDataByPage();
};

//分页查询数据
function queryTableDataByPage() {
  showSelectId.value = false;
  params.value.page = currentPage.value;
  params.value.rows = pageSize.value;
  //数据查询
  loading.value = true;
  if(props.typeName == '建筑物公里格网') {
    selectJzw()
  }else if(props.typeName == '人口') {
    selectRk()
  }else if(props.typeName == '经济') {
    selectJj()
  }else if(props.typeName == '超越概率') {
    selectCyGl()
  }else if(props.typeName == '建筑物单体') {
    selectJzwdt()
  }
}
function selectJzw() {
  isTable.value = true
  //分页查询
  queryDataView(params.value).then((response) => {
    nextTick(() => {
      tableDataForm.value.title = response.data.title;
      if (response.data.data && response.data.data.length > 0) {
        tableDataForm.value.tableData = response.data.data;
      } else {
        tableDataForm.value.tableData = [];
      }
      totalCount.value = response.data.total;
      loading.value = false;
    });
  }).catch(err => {
    totalCount.value = 0;
    tableDataForm.value.tableData = [];
    tableDataForm.value.title = [];//清空多选
    loading.value = false;
  });
}
function getYearName(val) {
	var name = ''
	yearArr.value.forEach(item => {
		if (item.dictItemCode == val) {
			name = item.dictItemName
			return
		}
	})
	return name
}
function getStructureType1(val1) {
	var name = ''
	structureTypeArr1.value.forEach(item => {
		if (item.dictItemCode == val1) {
			name = item.dictItemName
			return
		}
	})
	return name
}
function getStructureType2(val2) {
	var name = ''
	structureTypeArr2All.value.forEach(item => {
		if (item.dictItemCode == val2) {
			name = item.dictItemName
			return
		}
	})
	return name
}
async function getDictData() {
	await getDict("jglxyj").then(response => {
		structureTypeArr1.value = response.data;
	});
  await getDict("year").then(response => {
		yearArr.value = response.data;
	});
}
const structureTypeArr21 = ref([])
const structureTypeArr22 = ref([])
const structureTypeArr26 = ref([])
async function getDictData2() {
	await getDict("qtjgej").then(response => {
		structureTypeArr21.value = response.data;
	});

	await getDict("gjhntjgej").then(response => {
		structureTypeArr22.value = response.data;
	});

	await getDict("gycfej").then(response => {
		structureTypeArr26.value = response.data;
	});
	structureTypeArr2All.value = [...structureTypeArr21.value, ...structureTypeArr22.value, ...structureTypeArr26.value]
}
</script>

<style lang="scss" scoped>
.min-Table {
  height: 250px;
}

.max-Table {
  height: 90%;
}

//下方查看详情面板
.new-queryResultDiv {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: #fff;
  z-index: 10;
  border: 1px solid #e4e7ed;
}

.new-queryTableBtn {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  height: 50px;
  padding: 10px;
}

.new-queryTableSpan {
  position: relative;
  top: -32px;
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  color: #107ce5;
  display: inline-block;
  line-height: 32px;
  z-index: -1;
}

.new-queryTableDiv {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 50px;
  bottom: 50px;
}

.new-queryTableDiv-page {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 50px;
  padding: 8px;
}

:deep(.el-form-item--default) {
  padding-top: 20px;
}

/*多级表头的边框*/
:deep(.el-table thead.is-group th.el-table__cell) {
  border-bottom: 1px solid #CCCCCC;
  border-right: 1px solid #CCCCCC;
}
</style>